import React, { PureComponent } from "react";
import * as echarts from "echarts";
import hkData from "./Hk.json";
import testData from "./Test.json";
export default class Chart extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      width: "500px",
      height: "500px",
    };
    this.chart = null;
    this.option = {
      title: {
        text: "Population Density of Hong Kong （2011）",
        subtext: "Data from Wikipedia",
        sublink:
          "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{c} (p / km2)",
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        top: "center",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      visualMap: {
        min: 800,
        max: 50000,
        text: ["High", "Low"],
        realtime: false,
        calculable: true,
        inRange: {
          color: ["lightskyblue", "yellow", "orangered"],
        },
      },
      series: [
        {
          name: "香港18区人口密度",
          type: "map",
          map: "HK",
          label: {
            show: true,
          },
          data: [
            { name: "中西区", value: 20057.34 },
            { name: "湾仔", value: 15477.48 },
            { name: "东区", value: 31686.1 },
            { name: "南区", value: 6992.6 },
            { name: "油尖旺", value: 44045.49 },
            { name: "深水埗", value: 40689.64 },
            { name: "九龙城", value: 37659.78 },
            { name: "黄大仙", value: 45180.97 },
            { name: "观塘", value: 55204.26 },
            { name: "葵青", value: 21900.9 },
            { name: "荃湾", value: 4918.26 },
            { name: "屯门", value: 5881.84 },
            { name: "元朗", value: 4178.01 },
            { name: "北区", value: 2227.92 },
            { name: "大埔", value: 2180.98 },
            { name: "沙田", value: 9172.94 },
            { name: "西贡", value: 3368 },
            { name: "离岛", value: 806.98 },
          ],
          // 自定义名称映射
          nameMap: {
            "Central and Western": "中西区",
            Eastern: "东区",
            Islands: "离岛",
            "Kowloon City": "九龙城",
            "Kwai Tsing": "葵青",
            "Kwun Tong": "观塘",
            North: "北区",
            "Sai Kung": "西贡",
            "Sha Tin": "沙田",
            "Sham Shui Po": "深水埗",
            Southern: "南区",
            "Tai Po": "大埔",
            "Tsuen Wan": "荃湾",
            "Tuen Mun": "屯门",
            "Wan Chai": "湾仔",
            "Wong Tai Sin": "黄大仙",
            "Yau Tsim Mong": "油尖旺",
            "Yuen Long": "元朗",
          },
        },
      ],
    };
  }
  // 地图的某块区域点击， @name参数为地区名称
  areaClick = (params) => {
    console.log(params);
    const name = params.name;
    // const selected = params.data.selected;
    if (name === "北区") {
      echarts.registerMap("hecan", testData);
      this.chart.setOption({
        title: {
          text: "何灿在测试啊 啊啊啊啊啊啊",
          subtext: "Data from Wikipedia",
          sublink:
            "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: "何灿",
            type: "map",
            map: "hecan",
            label: {
              show: true,
            },
          },
        ],
      });
      this.chart.on("click", this.areaClick);
    }
  };
  componentDidMount() {
    echarts.registerMap("HK", hkData);
    this.chart = echarts.init(this.el);
    this.chart.setOption(this.option);
    this.chart.on("click", this.areaClick);
  }
  render() {
    const { width, height } = this.state;
    return (
      <div
        ref={(el) => (this.el = el)}
        style={{ width, height, background: "white", marginTop: 26 }}
      />
    );
  }
}
